<template>
	<div class="device_list">
		<!--日期选择-->
		<div class="search">
			<template>
				<div class="block">
					<el-date-picker
					v-model="timeValue"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					format="yyyy 年 MM 月 dd 日"
					>
					</el-date-picker>
					<el-button icon="el-icon-search" style='margin-left:30px;' @click='requestList' round>搜索</el-button>
				</div>
			</template>
			<hr />
		</div>
		<!--饼状图-->
		<el-row class="zhe_xian">
			<el-col style='margin-left:55px;'>
				<div v-show="this.cookieDates" class="grid-content bg-purple-light" id="cookiePic" style="width:666px;height:400px;display:inline-block;"></div>
				<div v-show="this.pillarDates" class="grid-content bg-purple-light" id="postPic" style="width:866px;height:500px;display:inline-block;"></div>
			</el-col>
		</el-row>
		<!--中间部分的内容-->
		<div class="midd">
			<h3>接口使用列表</h3>			
			<div class="biao">
				<el-table
					:data="tableData"
					border
					v-loading="listLoading"
					:header-cell-class-name="tableheaderClassName"
					:row-class-name="tableRowClassName"
					>
					<el-table-column
						prop="interfaceName"
						width="260"
						label="接口名称">
					</el-table-column>
					<el-table-column
						prop="interfaceUrl"
						label="路径"
						width='300px'>
					</el-table-column>
					<el-table-column
						prop="accessAppSize"
						label="访问应用个数">
					</el-table-column>
					<el-table-column
						prop="totalAccessSize"
						label="总访问次数">
					</el-table-column>	
					<el-table-column
						label="成功率(%)">
						<template slot-scope="scope">
								<span>{{scope.row.successPercent}}%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="maxProcessTime"
						label="最大响应时间(ms)">
					</el-table-column>		
					<el-table-column
						prop="minProcessTime"
						label="最小响应时间(ms)">
					</el-table-column>	
					<el-table-column
						prop="avgProcessTime"
						label="平均响应时间(ms)">
					</el-table-column>	
					<el-table-column
						fixed="right"
						label="操作">
						<template slot-scope="scope" style='text-align:center;'>
						<el-button   style=""  type="text" size="small"><span  @click="InterfaceDetails(scope.row)">详情</span></el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--分页-->
		<div class="di claerfix">
			<div class="di_foot" style="margin:0 auto;">
				<el-pagination
					style='text-align:center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="countTotal" 
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import  echarts from 'echarts';
import { interfaceUse, interfaceCookie, interfacePillar, checkLogin } from '../../api/api.js';
export default{
	name:"interfaceUse",
	data(){
		return{
		    timeValue:'',
			tableData: [],
			type:0,
			startDate:'',
			endDate:'',
			pageNumber: 1,
			pageSize: 10,
			countTotal:0,
			size:5,
			cookieArr:[],//饼状图数据
			cookieArr2:[],//饼状图解释
			pillarArr:[],//柱状图数据
			pillarArr2:[],//柱状图解释
			cookieDates:false,
			pillarDates:false,
			listLoading:false,
			addDeviceList:false,
			formLabelWidth:'100px',
		}
	},
	methods:{
		//请求列表数据
		requestList(){
			if(this.timeValue==null || this.timeValue.length!=2){
				return
			}
			let start = this.timeValue[0];
			let year = start.getFullYear();
			let month = start.getMonth()+1;
			let datas = start.getDate();
			let end = this.timeValue[1];
			let endyear = end.getFullYear();
			let endmonth = end.getMonth()+1;
			let enddatas = end.getDate();
			this.startDate = (year.toString())+'-'+(month.toString())+'-'+(datas.toString());
			this.endDate = (endyear.toString())+'-'+(endmonth.toString())+'-'+(enddatas.toString());
			this.getUsers();
			this.getUsers2();
			this.getUsers3();
		},
		//获取用户列表
		getUsers() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				startDate: this.startDate,
				endDate: this.endDate,
				interfaceType:this.type
			};
			console.log(this.startDate)
			console.log(this.endDate)
			this.listLoading = true;
			interfaceUse(para).then((res) => {
				console.log('interfacelist.......',res.list);
				this.tableData = res.data.list;
				this.countTotal = res.data.total;
				this.listLoading = false;
			});
		},
		//获取饼状图
		getUsers2(){
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate,
				interfaceType:this.type
			};
			this.listLoading = false;
			interfaceCookie(para).then((res) => {
				if(res.data.list.length!=0){
					this.cookieDates = true;
					for(var i=0; i< res.data.list.length; i++){
						var cookieData = {};
						cookieData.value = res.data.list[i].totalAccessSize;
						cookieData.name = res.data.list[i].interfaceName;
						this.cookieArr.push(cookieData);
						this.cookieArr2.push(res.data.list[i].interfaceName);
					}
				this.listLoading = false;
				this.echartCookie(this.cookieArr,this.cookieArr2);
				this.cookieArr=[];
				this.cookieArr2=[];
				}else{
					this.cookieDates = false;
				}
				
			});
		},
		//获取柱状图
		getUsers3(startDate,endDate) {
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate,
				interfaceType:this.type
			};
			this.listLoading = false;
			interfacePillar(para).then((res) => {
				if(res.data.list.length!=0){
					this.pillarDates = true;
					for(var i=0; i< res.data.list.length; i++){
						this.pillarArr.push(res.data.list[i].interfaceName);
						this.pillarArr2.push(res.data.list[i].avgProcessTime);
					}
					this.listLoading = false;
					this.echartPillar(this.pillarArr,this.pillarArr2);
					this.pillarArr=[];
					this.pillarArr2=[];
				}else{
					this.pillarDates = false;
				}
			});
		},
		//接口访问详情
		InterfaceDetails(row){
			let para=row;
			para.startDate=this.startDate;
			para.endDate=this.endDate;
			console.log(para);
			sessionStorage.setItem('InterfaceDetails', JSON.stringify(para));
			this.$router.push('/monitor/interfaceDetail');
		},
		// 分页获取
		handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers();
		},
		//表格加的属性
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {	
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		echartCookie(arr,arr3){
			//接口响应时间饼状图
			this.zhe = echarts.init(document.getElementById('cookiePic'));
			this.zhe.setOption({
			color:[ '#409EFF','#e4482b', '#46ebde', '#e05ae6', '#3d91eb' ],
		    title : {
		        text: '接口访问率分布图',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} 次 ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: arr3
		    },
		    series : [
		        {
		            name: 'Access From',
		            type: 'pie',
		            radius: ['40%', '70%'],
		            center: ['50%', '60%'],
		            data: arr,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		});
		
		},
		echartPillar(pillarArr,pillarArr2){
		//接口响应时间柱状图
			this.zhu = echarts.init(document.getElementById('postPic'));
			this.zhu.setOption(
			{
				title : {
			        text: '接口响应时间图',
			        x:'center'
			    },
		    	color: ['#3398DB'],
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {      // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {	
			        	show : true,
			            type : 'category',
			            data :pillarArr ,
						nameRotate: 45,
			            axisTick: {
			                alignWithLabel: true
			            },
						
						axisLabel: {
							//x轴文字的配置
							show: true,
							interval: 0,//使x轴文字显示全
							rotate: 30
						}
			        }
			    ],
			    yAxis : [
			        {
						name:'接口响应时间(ms)',
			            type : 'value',
			            min:1
			        }
			    ],
			    series : [
			        {
			            name:'平均耗时(ms)',
			            type:'bar',
			            barWidth: '30%',
			            data:pillarArr2,
						itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#83bff6' },
							{ offset: 0.5, color: '#188df0' },
							{ offset: 1, color: '#188df0' }
							])
						},
			        }
			    ]
			})
		}
	},
	mounted() {
		if(checkLogin(this)){
			this.requestList();		
		}
	},
	created(){
		let start = new Date();
		const end = new Date();
		this.timeValue =[start,end];
	}
}
</script>
<style scoped>
	.device_list{width:100%;}
	.device_list .head{
		width: 90%;
		margin: 0 auto;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.device_list .midd{ width:90%;margin: 0 auto; margin-bottom: 50px;margin-top:50px;};
	.search{margin:30px 60px;};
	.di{
		width:90%;
		margin: 0 auto;
		overflow: hidden;
	}
	.di .di_foot{
		width: 38%;
		padding-bottom: 20px;
		padding-top: 20px;
	}
</style>